<template>
  <div class="chart-table">
    <component-title title="设备异常运行报警记录表"></component-title>
    <el-date-picker
      class="date-pick"
      v-model="date_pick"
      size="medium"
      value-format="yyyy-MM-dd"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="~"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      @change="handleDatePicker"
    >
    </el-date-picker>
    <el-table
      :data="table_data"
      class="table"
      :header-cell-style="handleHeaderCellStyle"
      :cell-style="handleCellStyle"
      :row-style="handleRowStyle"
    >
      <el-table-column
        type="index"
        label="序号"
        width="64"
      ></el-table-column>
      <el-table-column
        prop="tower_name"
        label="设备名称"
        width="112"
      ></el-table-column>
      <el-table-column
        prop="driver_name"
        label="驾驶司机"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="alarm_value"
        label="报警值"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="peak_value"
        label="实际值"
        width="100"
      ></el-table-column>
      <el-table-column label="报警类型" width="110">
        <template slot-scope="scope">{{scope.row.type | filterAlarmType}}</template>
      </el-table-column>
      <el-table-column label="报警时间" show-overflow-tooltip>
        <template slot-scope="scope">{{scope.row.over_start_time}}-{{scope.row.over_end_time}}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ComponentTitle from "@/components/title";

import { getFirstDayOfTheMonth, getToday } from "@/utils/formdate.js";

import { fetchEquipmentAlarmRecordTable } from "@/api/equipment";

export default {
  name: "Chart-Table",
  filters: {
    filterAlarmType: function(value) {
      if (value == "1") {
        return "塔吊超重";
      } else if (value == "2") {
        return "塔吊超速";
      } else if (value == "3") {
        return "电梯超重";
      } else {
        return "卸料平台超重";
      }
    }
  },
  components: {
    ComponentTitle
  },
  data() {
    return {
      date_pick: [getFirstDayOfTheMonth(), getToday()],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      table_data: undefined
    };
  },
  methods: {
    async handleDatePicker() {
      let params = {
        start_time: this.date_pick[0],
        end_time: this.date_pick[1]
      };
      let arr = [];
      let tower_crane_params = Object.assign(params, { cate: 1 });
      await fetchEquipmentAlarmRecordTable(tower_crane_params).then(res => {
        arr = arr.concat(...res.data);
      });
      let elevator_params = Object.assign(params, { cate: 2 });
      await fetchEquipmentAlarmRecordTable(elevator_params).then(res => {
        arr = arr.concat(...res.data);
      });
      this.table_data = arr;
    },
    handleRowStyle({ row, rowIndex }) {
      if (rowIndex % 2) {
        return 'background:#192538;'
      } else {
        return 'background: transparent;'
      }
      // return 'background:#192538;'
    },
    handleCellStyle({ row, column, rowIndex, columnIndex }) {
      let str = "";
      if (columnIndex == 0) {
        str += "padding-left: 16px;";
      }
      str += 'padding-top: 9px;padding-bottom: 9px;'
      return str;
    },
    handleHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
      let str = ''
      if (columnIndex == 0) {
        str += "padding-left: 16px;";
      }
      str += 'padding-top: 9px;padding-bottom: 8px;background:#192538;color: #fff;border-bottom: 1px solid #3a4c68;'
      return str;
    }
  },
  mounted() {
    this.handleDatePicker();
  }
};
</script>

<style lang="scss">
@import "../../assets/sass/DatePicker.scss";

.chart-table {
  margin-top: 26px;

  .table {
    margin-top: 16px;
    background: transparent;
    color:#ffffff;
    height: 280px;
  }

  /deep/ .el-table th > .cell, .el-table .cell {
    padding: 0;
  }

  /deep/ .el-table::before {
    height: 0;
  }

  /deep/ .el-table td, .el-table th.is-leaf {
    border-bottom: none;
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: #212e3e !important;
  }
}
</style>
